<template>
	<view class="flex-col page">

		<image class="self-center image_2" src="/static/image/logo-1.jpg" />
		<view class="flex-col self-stretch group">
			<view class="flex-row items-center group_2">
				<image class="image_3" src='/static/icons/u-account.png' />
				<u-input placeholder="请输入手机号" v-model="loginForm.username" ></u-input>
			</view>
			<view class="flex-row items-center group_3">
				<image class="image_4" src="/static/icons/keys.png" />
				<u-input placeholder="请输入登录密码" type="password" v-model="loginForm.password"></u-input>
			</view>
		</view>

		<view class="flex-row items-center justify-center" style="padding: 40rpx 20rpx;padding-bottom: 20rpx;">
			<checkbox-group>
				<view style="display: flex;">
					<view style="margin-right: 10rpx;">
						<u-checkbox class="tea" :model="redmeChecked" :class="{'checked':redmeChecked}"
							@change="readmeCheck" :checked="redmeChecked" shape="circle"
							activeColor="#ff0000"></u-checkbox>
					</view>
					<view style="flex: 1; align-self: center; font-size:14px;  color: rgb(140, 140, 140);">
						我已阅读并同意<text style="color:#ff0101;" @click="showContract()">《客户服务协议》</text>
					</view>
				</view>

			</checkbox-group>
		</view>
		<view class="flex-col self-stretch group_4">
			<view class="flex-col justify-start items-start self-stretch text-wrapper" @click="login">
				<text class="font text_2">登 录</text>
			</view>
			<!-- 			<text class="self-center font text_3 mt-19">忘记密码</text> -->
			<text class="self-center font text_3 mt-19" @click="goRegister">注册新用户</text>
		</view>
	</view>
</template>

<script>
	import code from '../../uni_modules/uview-ui/libs/config/props/code';

	export default {
		components: {},
		props: {},
		data() {
			return {
				loginForm: {
					username: "",
					password: "",
				},
				redmeChecked: false,
			};
		},

		methods: {
			readmeCheck(e) {
				console.log(e)
				this.redmeChecked = !this.redmeChecked;
			},
			showContract() {
				uni.navigateTo({
					url: '/pages-publics/protocols/protocols'
				})
			},
			goRegister() {
				uni.redirectTo({
					url: '/pages-publics/register/register'
				})
			},
			login() {
				if (!this.redmeChecked) {
					uni.showToast({
						title: '请先阅读并同意用户隐私协议',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '正在登录'
				})
				if (!this.loginForm.username) {
					uni.showToast({
						icon: 'none',
						title: "请输入登录账号"
					})
					return;
				}
				if (!this.loginForm.password) {
					uni.showToast({
						icon: 'none',
						title: "请输入登录密码"
					})
					return;
				}

				let _this = this;
				let postData = '\r\n--X-LIANGPIN-BOUNDARY' +
					'\r\nContent-Disposition: form-data; name="username"' +
					'\r\n' +
					'\r\n' + this.loginForm.username +
					'\r\n--X-LIANGPIN-BOUNDARY' +
					'\r\nContent-Disposition: form-data; name="password"' +
					'\r\n' +
					'\r\n' + this.loginForm.password +
					'\r\n--X-LIANGPIN-BOUNDARY--';
				wx.login({
					success: (res) => {
						console.log(res)
						_this.doLogin(postData, res.code)
					}
				})


			},
			doLogin(postData, code) {
				let _this = this;
				wx.request({
					url: `${this.$Utils.ApiUrl}/login`,
					data: postData,
					method: 'POST',
					header: {
						'content-type': 'multipart/form-data; boundary=X-LIANGPIN-BOUNDARY'
					},
					complete(res) {
						console.log(res)
						if (res.statusCode && res.statusCode != 200) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						} else {
							_this.$store.commit("ADD_USER_TOKEN", res.data.token)
							_this.$store.commit("ADD_OUTTIME", res.data.expiration) 
							_this.doBindUser(code)
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							setTimeout(() => {
								_this.getUserInfo()
							}, 2000)

						}

					}
				})
			},
			doBindUser(code) {
				this.$put({
					url: `${this.$Utils.ApiUrl}/openId/mine?code=${code}`
				}).then(res => {

					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});


				}).catch(err => {

				})
			},
			getUserInfo() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/me`,
					data: {

					}
				}).then(res => {

					this.$store.commit("ADD_USER", res)
					uni.navigateBack({
						fail() {
							uni.switchTab({
								url:'/pages/my/my'
							})
						}
					})
				})
			}

		},
	};
</script>

<style scoped lang="scss">
	.ml-13 {
		margin-left: 22.67rpx;
	}

	.mt-19 {
		margin-top: 33.14rpx;
	}

	.page {
		padding-bottom: 652.33rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.image_2 {
			margin-top: 170.93rpx;
			width: 200.42rpx;
			height: 200.42rpx;
		}

		.group {
			margin-top: 132.56rpx;
			padding: 0 97.67rpx;

			.group_2 {
				padding: 0 10.47rpx 13.95rpx;
				border-bottom: solid 1.74rpx #a6a6a6;

				.image_3 {
					width: 34.88rpx;
					height: 34.88rpx;
				}
			}

			.group_3 {
				padding: 26.16rpx 10.47rpx 13.95rpx;
				border-bottom: solid 1.74rpx #a6a6a6;

				.image_4 {
					width: 41.86rpx;
					height: 41.86rpx;
				}

				.text {
					line-height: 22.76rpx;
				}
			}
		}

		.group_4 {
			margin-top: 57.56rpx;
			padding: 0 174.42rpx;

			.text-wrapper {
				padding: 20.95rpx 6.98rpx;
				background-color: #ff0101;
				border-radius: 32.16rpx;

				.text_2 {
					margin-left: 170.93rpx;
					color: #ffffff;
					line-height: 29.65rpx;
				}
			}

			.text_3 {
				color: #ff0101;
			}
		}

		.font {
			font-size: 28.42rpx;
			font-family: SourceHanSansCN;
			line-height: 22.66rpx;
			color: #888888;
		}
	}
</style>